<template>
  <div class="app">
    <div class="imgBox" >
        <div class="title">
          <div class="titleText">
            食堂就餐数据看板
          </div>
          <span class="date">{{date}}  {{weekday}}
                  <a-button  type="primary" @click="Fullscreen"> {{'显示/退出全屏'}}</a-button>
          </span>
        </div>
        <div class="contentBox">
          <div class="itemBox flex2" >
            <div class="itemTitle">
              今日消费餐次实时数据
            </div>
            <div class="content1">
              <div class="leftBox">
                <div  class="item">
                   <div class="name">早餐</div>
                   <div class="value">
                     <span>{{SumMealObj.num_1}}次</span>
                     <span>{{SumMealObj.amount_1}}元</span>
                   </div>
                </div>
                <div class="item" style=" border: 1px solid #f8b722;color: #f8b722;">
                   <div class="name">午餐</div>
                   <div class="value">
                     <span>{{SumMealObj.num_2}}次</span>
                     <span>{{SumMealObj.amount_2}}元</span>
                   </div>
                </div>
                <div class="item" style=" border: 1px solid #1ec8f4;color: #1ec8f4;">
                    <div class="name">晚餐</div>
                    <div class="value">
                      <span>{{SumMealObj.num_3}}次</span>
                      <span>{{SumMealObj.amount_3}}元</span>
                    </div>
                </div>
                <div class="item" style=" border: 1px solid #cd72cf;color: #cd72cf;">
                    <div class="name">夜宵</div>
                    <div class="value">
                      <span>{{SumMealObj.num_4}}次</span>
                      <span>{{SumMealObj.amount_4}}元</span>
                    </div>
                </div>
              </div>
              <div class="rightBox">
                  <div  class="item">
                    <div class="name">全天</div>
                    <div class="value">
                      <span>{{SumMealObj.num_5}}次</span>
                      <span>{{SumMealObj.amount_5}}元</span>
                    </div>
                  </div>
              </div>
            </div>
          </div>
          <div class="itemBox flex2" >
            <div class="itemTitle">
              今日消费金额区间
            </div>
            <div class="content3" v-if="SectionList.length">
              <Bar :chartData="SectionList" height="220px" :option="{ title: { text: '', left: 'center' } ,color:['#ea5e23','#f9b723','#42feef']}"></Bar>
            </div>
          </div>
          <div class="itemBox flex2" >
            <div class="itemTitle">
              学生用餐率
            </div>
            <div class="content2" style="">
                <div class="item" v-if="DinnerRateArr[0]">
                  <div class="pieTitle">
                    {{DinnerRateArr[0].mealName}}
                  </div>
                  <div class="pieContent">
                    <pie :chartData="pieData1" height="120px" :option="{ title: { text: '', left: 'center',color:'' },color:['#135c66','#ef5b1d'] }" />
                  </div>
                </div>
                <div class="item" v-if="DinnerRateArr[1]">
                  <div class="pieTitle">
                    {{DinnerRateArr[1].mealName}}
                  </div>
                  <div class="pieContent">
                    <pie :chartData="pieData2" height="120px" :option="{ title: { text: '', left: 'center' } }" />
                  </div>
                </div>
                <div class="item" v-if="DinnerRateArr[2]">
                  <div class="pieTitle">
                    {{DinnerRateArr[2].mealName}}
                  </div>
                  <div class="pieContent">
                    <pie :chartData="pieData3" height="120px" :option="{ title: { text: '', left: 'center' } }" />
                  </div>
                </div>
                <div class="item" v-if="DinnerRateArr[3]">
                  <div class="pieTitle">
                     {{DinnerRateArr[3].mealName}}
                  </div>
                  <div class="pieContent">
                    <pie :chartData="pieData4" height="120px" :option="{ title: { text: '', left: 'center' } }" />
                  </div>
                </div>
            </div>
          </div>
          <div class="itemBox flex2">
            <div class="itemTitle">
              各年级未用餐人数统计
            </div>
            <div class="content4" v-if="NothaveMealsArr.length">
              <Bar :chartData="NothaveMealsArr" height="260px" :option="{ title: { text: '', left: 'center' } ,color:['#ea5e23','#f9b723','#42feef']}"></Bar>
            </div>
          </div>

          <div class="itemBox flex2">
            <div class="itemTitle" style="width:420px;">
              各年级用餐金额过低人数统计
            </div>
            <div class="content5" v-if="SalePersonDept.length">
              <Bar :chartData="SalePersonDept" height="260px" :option="{ title: { text: '', left: 'center' } ,color:['#ea5e23','#f9b723','#42feef']}"></Bar>
            </div>
          </div>

          <div class="itemBox flex2">
            <div class="itemTitle">
              设备运行状态
            </div>
            <div class="content3" v-if="OnLineList.length">
                <!-- <Gauge :chartData="{ name: '在线率', value: 80, }" height="260px"></Gauge> -->
                <div class="totalCircle">
                  <div class="sunCircle">
                    <div class="totalContent">
                      <span>{{deviceCount}}</span>
                      设备总数
                    </div>
                  </div>
                </div>
                <pie style="margin:auto;" :chartData="OnLineList" height="270px" :option="{ title: { text: '', left: 'center' } }" />
            </div>
          </div>
        </div>
    </div>
  </div>

</template>

<script lang="ts"  setup>
  import {ref, reactive, computed, unref, onUnmounted, onBeforeUnmount,onMounted} from 'vue';
  import {onMountedOrActivated} from "@/hooks/core/onMountedOrActivated";
  import dayjs from 'dayjs';
  import Pie from '/@/components/chart/Pie.vue';
  import Bar from '/@/components/chart/Bar.vue';
  import LineMulti from '/@/components/chart/LineMulti.vue';
  import Gauge from '/@/components/chart/Gauge.vue';
  import {findSumMealList,findSection,findDinnerRate,findNothaveMeals,findSalePersonTooLowByDept,findOnLineList} from './consumer.api'
  import { useHeaderSetting } from '/@/hooks/setting/useHeaderSetting';
  import { useMenuSetting } from '/@/hooks/setting/useMenuSetting';
  import { useMultipleTabSetting } from '/@/hooks/setting/useMultipleTabSetting';
  import { triggerWindowResize } from '/@/utils/event';
  const { getShowMenu, setMenuSetting } = useMenuSetting();
  const { getShowHeader, setHeaderSetting } = useHeaderSetting();
  const { setMultipleTabSetting } = useMultipleTabSetting();

  const date = ref();
  const timer = ref();
  const weekday = ref(dayjs().format('dddd')) 

  const pieData5 = ref([
    { 
      value: 400, 
      name: '正常归寝',
      itemStyle: {
            color: '#41fdef'
      }
    },
    { 
      value: 105, 
      name: '迟到',
      itemStyle: {
            color: '#f8b622'
      }
    },
     { 
      value: 250, 
      name: '请假',
      itemStyle: {
            color: '#5493e2'
      }
    },
    { 
      value: 80, 
      name: '未归寝',
      itemStyle: {
            color: '#e95d22'
      }
    },
    { 
      value: 30, 
      name: '未打卡',
      itemStyle: {
            color: '#cd71ce'
      }
    },
  ])
  const barDataSource = ref([
    {
      name : '2021',
      value: 10,
      backgroundStyle: {
            color: '#ea5e23',
      }
    },
      {
      name : '2021',
      value: 10,
      style: {
            color: '#ea5e23',
      }
    },
    {
      name : '2022',
      value: '9',
       itemStyle: {
            color: '#f9b723'
      }
    },
    {
      name : '2023',
      value: '3',
       itemStyle: {
            color: '#1dc8fc'
      }
    },
  ])

  const barMoneyDataSource = ref([
    {
      name : '08:30',
      value: 10,
      backgroundStyle: {
            color: '#ea5e23',
      }
    },
      {
      name : '09:30',
      value: 3,
      style: {
            color: '#ea5e23',
      }
    },
    {
      name : '10:30',
      value: 6,
       itemStyle: {
            color: '#f9b723'
      }
    },
    {
      name : '11:30',
      value: 30,
       itemStyle: {
            color: '#1dc8fc'
      }
    },
     {
      name : '12:30',
      value: 50,
       itemStyle: {
            color: '#1dc8fc'
      }
    },
     {
      name : '13:30',
      value: 16,
       itemStyle: {
            color: '#1dc8fc'
      }
    },
     {
      name : '14:30',
      value: 18,
       itemStyle: {
            color: '#1dc8fc'
      }
    },
    {
      name : '15:30',
      value: 0,
       itemStyle: {
            color: '#1dc8fc'
      }
    },
     {
      name : '16:30',
      value: 0,
       itemStyle: {
            color: '#1dc8fc'
      }
    },
     {
      name : '17:30',
      value: 19,
       itemStyle: {
            color: '#1dc8fc'
      }
    },
      {
      name : '17:30',
      value: 29,
       itemStyle: {
            color: '#1dc8fc'
      }
    },
  ])

  const dormPasslList = ref([
    { dorm: 'A504', name: '杨**', time:'2024-6-13',direction:'进入' },
    { dorm: 'A111', name: '陈**', time:'2024-6-13',direction:'离开' },
    { dorm: 'A612', name: '林**', time:'2024-6-13',direction:'进入' },
  ])

  const barMultiData = ref([
    {
      name: '2',
      value: 50,
      type: '进入宿舍',
    },
     {
      name: '4',
      value: 60,
      type: '进入宿舍'
    },
     {
      name: '6',
      value: 80,
      type: '进入宿舍'
    },
    {
      name: '8',
      value: 50,
      type: '进入宿舍'
    },
     {
      name: '10',
      value: 60,
      type: '进入宿舍'
    },
     {
      name: '12',
      value: 80,
      type: '进入宿舍'
    },
     {
      name: '14',
      value: 80,
      type: '进入宿舍'
    },
    {
      name: '16',
      value: 50,
      type: '进入宿舍'
    },
     {
      name: '2',
      value: 10,
      type: '进入宿舍'
    },
     {
      name: '4',
      value: 30,
      type: '离开宿舍'
    },
     {
      name: '6',
      value: 40,
      type: '离开宿舍'
    },
    {
      name: '8',
      value: 30,
      type: '离开宿舍'
    },
     {
      name: '10',
      value: 20,
      type: '离开宿舍'
    },
     {
      name: '12',
      value: 10,
      type: '离开宿舍'
    },
     {
      name: '14',
      value: 50,
      type: '离开宿舍'
    },
    {
      name: '16',
      value: 30,
      type: '离开宿舍'
    },
    
  ])

  const outSchoolList = ref([
    { class: '2021级08班', name: '杨**', time:'2024-6-13',content:'请假', dorm: 'A504', },
    { class: '2022级07班', name: '陈**', time:'2024-6-13',content:'临时出校', dorm: 'A111', },
    { class: '2023级04班', name: '林**', time:'2024-6-13',content:'临时出校', dorm: 'A612', },
  ])

   const pieData1 = ref([
    { 
      value: 335, 
      name: '已吃',
      itemStyle: {
            color: '#3e8bff'
      }
    },
    { value: 205, name: '未吃',
        itemStyle: {
            color: '#f3f3f3'
      }
    },
  ])

   const pieData2 = ref([
    { 
      value: 335, 
      name: '已吃',
      itemStyle: {
            color: '#42feef'
      }
      // color: '#29a4b1'  
    },
    { value: 50, name: '未吃',
      itemStyle: {
            color: '#f3f3f3'
      }
    },
  ])

  const pieData3 = ref([
    { 
      value: 335, 
      name: '已吃',
      itemStyle: {
            color: '#ea5e23'
      }
    },
    { value: 150, name: '未吃',
       itemStyle: {
            color: '#f3f3f3'
      }
    },
  ])

  const pieData4 = ref([
    { 
      value: 50, 
      name: '已吃',
      itemStyle: {
            color: '#cb72cd'
      }
    },
    { value: 355, name: '未吃',
       itemStyle: {
            color: '#f3f3f3'
      }
    },
  ])

const SumMealObj  = ref({})
const SectionList  = ref([])
const DinnerRateArr = ref([])
const NothaveMealsArr = ref([])
const SalePersonDept = ref([])
const OnLineList = ref([])
const deviceCount = ref(0)

if(!localStorage.fullBool) localStorage.fullBool = 2
let fullBool =  localStorage.fullBool

function Fullscreen(){
    if(localStorage.fullBool==2){
        localStorage.fullBool=1
        console.log(localStorage.fullBool);
         setHeaderSetting({ 
          show: false,
        });
        setMultipleTabSetting({
          show:false
        })
      setTimeout(()=>{
        localStorage.fullBool=1
        localStorage.fullBool=1
       document.documentElement.webkitRequestFullscreen();
       setMenuSetting({
            show: false,
            hidden: true,
          });
      },500)
    }else if(localStorage.fullBool==1){
        localStorage.fullBool=2
        console.log(333);
        console.log(localStorage.fullBool);
        setHeaderSetting({ show: true });
         setMultipleTabSetting({
          show:true
        })
          document.webkitExitFullscreen();
  setMenuSetting({
            show: true,
            hidden: false,
          });
      setTimeout(()=>{
          setMenuSetting({
            show: true,
            hidden: false,
          });

        if (document.exitFullScreen) {
          document.exitFullScreen();
        } else if (document.mozCancelFullScreen) {
          document.mozCancelFullScreen();
        } else if (document.webkitExitFullscreen) {
          document.webkitExitFullscreen();
        } else if (document.msExitFullscreen) {
          document.msExitFullscreen();
        }
      },500)
    }
}

onMountedOrActivated(()=>{
  timer.value = setInterval(function() {date.value = dayjs().format('YYYY-MM-DD HH:mm:ss');}, 1000);
})

onBeforeUnmount(()=>{
  if(timer.value) {
    clearInterval(timer.value);
    }
})


onMounted(()=>{
  getFindSumMealList()
  getFindSection()
  getDinnerRate()
  getNothaveMeals()
  getFindSalePersonTooLowByDept()
  getFindOnLineList()
})
function getFindSumMealList(){
   return findSumMealList({
    }).then(res=>{
        SumMealObj.value = res
    })
}

function getFindSection(){
   return findSection({
    }).then(res=>{
        let arr = []
        res.forEach(item=>{
          arr.push({
            name: item.sectionName,
            value: item.sectionnum,
          })
        })
        SectionList.value = arr
    })
}

function getDinnerRate(){
   return findDinnerRate({
    }).then(res=>{
        DinnerRateArr.value = res
        if(res[0]){
            pieData1.value[0].value = res[0].saleSum
            pieData1.value[1].value = Number(res[0].personCount) - Number(res[0].saleSum)
        }

        if(res[1]){
            pieData2.value[0].value = res[1].saleSum
            pieData2.value[1].value = Number(res[1].personCount) - Number(res[1].saleSum)
        }

        if(res[2]){
            pieData3.value[0].value = res[2].saleSum
            pieData3.value[1].value = Number(res[2].personCount) - Number(res[2].saleSum)
        }

        if(res[3]){
            pieData4.value[0].value = res[0].saleSum
            pieData4.value[1].value = Number(res[3].personCount) - Number(res[3].saleSum)
        }


    })
}

function getNothaveMeals(){
   return findNothaveMeals({
    }).then(res=>{
        let arr = []
        res.notHaveMeals.forEach(item=>{
              arr.push({
                name: item.departname,
                value : Number(item.notHaveMealsCnt)
              })
        })
        NothaveMealsArr.value = arr
    })
}

function getFindSalePersonTooLowByDept(){
   return findSalePersonTooLowByDept({
    }).then(res=>{
        let arr = []
          res.tooLowData.forEach(item=>{
            arr.push({
              name: item.departname,
              value : Number(item.cnt)
            })
        })
        SalePersonDept.value = arr
    })
}

function getFindOnLineList(){
   return findOnLineList({
    }).then(res=>{
      let obj1 =  { 
        value: res.offline, 
        name: '离线设备',
        itemStyle: {
              color: '#ea5e23'
        }
      }
      let obj2 =  {
        value: res.online, 
        name: '在线设备',
        itemStyle: {
              color: '#41fdee'
        }
      }
      OnLineList.value.push(obj1)
      OnLineList.value.push(obj2)
      deviceCount.value = res.count

    })
}



</script>

<style lang="less" scoped>

  .app{
    height: 100%;
    width: 100%;
  }
  .imgBox{
    position: relative;
    /* 目标宽高 */
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-image: url(/@/assets/images/guard/bg.png);
    background-size: cover;
    .title{
      color: #fff;
      position: relative;
      .titleText{
         position: absolute;
         left: 50%;
         top: 0px; 
         transform: translate(-50%, 0%); 
         font-size: 60px;
      }
      .date{
        position: absolute;
        right: 115px;
        top: 26px;
        font-size: 20px;
      }
    }
    .contentBox{
        background-image: url(/@/assets/images/guard/borderBg.png);
        background-size: cover;
        width: 98%;
        height: 91%;
        margin: 60px auto 30px;
        display: flex;
        padding: 85px 30px 65px;
        flex-wrap: wrap;
        justify-content: space-around;

        .itemBox{
          background: #001e26;
          height: 35vh;
          position: relative;
          border: 1px solid #21c7f9;
          border-radius: 10px;
          padding: 16px;
          .itemTitle{
            height: 45px;
            width: 260px;
            color: #fdfafd;
            font-size: 22px;
            font-weight: 600;
            display: flex;
            align-items: center;
            padding-left: 30px;
            background-image:url(/@/assets/images/guard/title.png);
            background-size:cover;
          }
        }
        .flex3{
          width: 630px;
          
        }
        .flex2{
          width: 32%;
        }
         .flex1{
          width: 1400px;
          height: 140px !important;
          display: flex;
        }
    }
  }


  .box1{
       &::before {
            content: "";
            width: 100%;
            height: 0;
            position: absolute;
            top: 0px;
            left: 0px;
            border-bottom: 29px solid #001e26;
            border-left: 29px solid #0f5eca;
            border-right: 29px solid #009eb5;
          }
          &::after {
            content: "";
            width: 100%;
            height: 0;
            position: absolute;
            bottom: 0;
            left: 0;
            border-top: 29px solid #001e26;
            border-left: 29px solid #1457c0;
            border-right: 29px solid #046cde;
          }
  }

  .contentTitle1{
    display: flex;
    width: 100%;
    padding: 5px;
    .item{
      flex: 1;
      display: flex;
      justify-content: center;
      color: #fff;
    }
  }

  .content1{
    margin-top: 20px;
   display: flex;
   flex-wrap: wrap;
   .leftBox{
      width: 72%;
      display: flex;
      justify-content: space-evenly;
      flex-wrap: wrap;
      height: 260px;
      .item{
        width: 150px;
        height: 110px;
        border-radius: 10px;
        border: 1px solid #e85b22;
        color: #e85b22;
        display: flex;
        align-items: center;
        .name{
          flex: 1;
          font-weight: 600;
          font-size: 30px;
          text-align: center;
        }
        .value{
          flex: 1;
          display: flex;
          flex-direction: column;
        }
      }
   }
   .rightBox{
      height: auto;
      width: 28%;
      margin-bottom: 19px;
      .item{
        color: #3ffeef;
        border: 1px solid #3ffeef;
        border-radius: 10px;
        height: 100%;
        .name{
          display: flex;
          align-items: center;
          justify-content: center;
          height: 50%;
          font-weight: 600;
          font-size: 39px;
        } 
        .value{
          display: flex;
          flex-direction: column;
          align-items: center;
          span{
              font-weight: 600;
              font-size: 20px;
          }
        }
      }
   }
#octagon {
  width: 150px;
  height: 110px;
  background: #ea5a21;
  position: relative;
  overflow: hidden;
}

#octagon:before {
  content: "";
  width: 150px;
  height: 0;
  position: absolute;
  top: 0;
  left: 0;
  border-bottom: 15px solid #ea5a21;
  border-left: 15px solid #001e26;
  border-right: 15px solid #001e26;
  overflow: hidden;

}
#octagon:after {
  content: "";
  width: 150px;
  height: 0;
  position: absolute;
  bottom: 0;
  left: 0;
  border-top: 15px solid #ea5a21;
  border-left: 15px solid #001e26;
  border-right: 15px solid #001e26;
}

.octagonItem{
  width: 134px;
  height: 94px;
  background: #001e26;
  position: absolute;
  z-index: 10;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);



    &:before {
      content: "";
      width: 144px;
      height: 0;
      position: absolute;
      top: 0;
      left: 0;
      border-bottom: 15px solid #001e26;
      border-left: 15px solid #d75c28;
      border-right: 15px solid #d75c28;
    }
    &:after {
      content: "";
      width: 144px;
      height: 0;
      position: absolute;
      bottom: 0;
      left: 0;
      border-top: 15px solid #d75c28;
      border-left: 15px solid #d75c28;
      border-right: 15px solid #d75c28;
    }

}

    
  }

  .content2{
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    .item{
      //flex: 1;
      width: 50%;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      height: 150px;
      color: #f2f6f4;
      .pieContent{
        height: 150px;
        width: 100%;
      }
     
    }
  }

  .content3{
    display: flex;
    width: 100%;
    position: relative;
    .totalCircle{
      top: 25.5%;
      left: 50%;
      transform: translate(-50%,0%);
      position: absolute;
      z-index: 1000;
      background: #011f27;
      width: 160px;
      height: 160px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      .sunCircle{
        border: 3px dashed #44f9ef;
        width: 140px;
        height: 140px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        .totalContent{
          border: 3px solid #1b42c5;
          width: 137px;
          height: 137px;
          border-radius: 50%;
          color: #fffdf9;
          background: linear-gradient( to bottom,#1739a5,#188f9e);
          display: flex;
          flex-direction: column;
          align-items: center;
          padding-top: 30px;
          span{
            font-size: 26px;
          }
        }
      }
    }
  }

  .content5{
    display: flex;
    width: 100%;
      padding: 20px 0;
    .item{
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      border-right: 2px solid #1ac9fb;
      .label{
        color: #f2f6f4;
        font-size: 18px;
        margin-right: 20px;
      }
      .val{
        font-size: 40px;
        color: #f2f6f4;
        font-weight: 600;
      }
      &:last-child{
        border-right: 0;
      }
    }
  }
  
.content4{
  padding-top: 20px;
  
}



</style>
